<template>
  <MdPreview v-if="mode==='card'" :modelValue="prop.content"/>

  <el-button v-if="mode==='dialog'"
             style="padding: 0"
             text type="primary" @click="openDialog">查看全文
  </el-button>
  <el-dialog v-model="dialogLoading"
             append-to-body
             width="70%"
  >
    <MdPreview v-if="mode==='dialog' && dialogLoading " :modelValue="content"/>
  </el-dialog>

  <MdPreview v-if="mode==='page'" :modelValue="prop.content"/>
</template>
<script setup>
import {MdPreview} from "md-editor-v3";
import {ref} from "vue";
import {postQuery} from "@/views/system/post/js/PostRequest.js";


const prop = defineProps({
  post: {
    type: Object,
  },
  mode: {
    type: String,
    required: true
  },
  content: {
    type: String,
  },
})

const content = ref('')
const dialogLoading = ref(false)

const openDialog = () => {
  postQuery({id: prop.post.id}).then((res) => {
    if (res.success) {
      content.value = res.data.content;
    }
  })
  dialogLoading.value = true
}

</script>

<style scoped>

</style>